
<script>

export default {
	data () {
		return {

		}
	},
	props: {
		articleId: {
			type: String,
			default: ''
		},
		list: {
			type: Array,
			default: () => ([])
		}
	},
	render(c) {
		let _this = this;

		return c('div', {
			class: 'help-aritcle-tree'
		}, [getListHtml(this.list, [])]);
	
		function getListHtml(list, aIndex) {
			let arr = [];
			list.forEach((item, index) => {
				let indexs = JSON.parse(JSON.stringify(aIndex));
				indexs.push(index);
				arr.push(c('div', {
					class: {
						item: true,
						open: item.open
					}
				}, getItemHtml(item, indexs)));
			})
			return c('div', {
				class: ['list'],
				style: {
					paddingLeft: aIndex.length>0?'20px':''
				}
			}, arr);
		}

		function getItemHtml(item, aIndex) {
			if(item.children && item.children.length) {
				return [c('div', {
					class: 'catalog',
					on: {
						click: () => {
							// 改变打开状态
							_this.$emit('changeOpen', aIndex);
						}
					}
				}, [c('i', {
					class: 'icon'
				}), c('span', {
					domProps: {
						innerHTML: item.name
					}
				})]), getListHtml(item.children, aIndex)];
			} else {
				return [c('div', {
					class: {
						'article': true,
						'active': item.id == _this.articleId
					},
					domProps: {
						innerHTML: item.name
					},
					on: {
						click: () => {
							_this.$emit('changeArticleId', item.id);
						}
					}
				})]
			}
		}
	}
}	
</script>
<style lang="less" scoped>
.help-aritcle-tree > .list {
	color: #909090;
	.item.open {
		& > .catalog {
			.icon {
				transform: rotate(90deg);
			}
		}
		& > .list {
			display: block;
		}
	}
	.catalog:has(~ .list .article.active) {
		color: #000;
		.icon {
			&:before {
				border-left-color: #000000;
			}
		}
	}
	& > .item {
		margin-bottom: 18px;
		.catalog {
			position: relative;
			padding-left: 16px;
			font-size: 14px;
			line-height: 20px;
			cursor: pointer;
			.icon {
				position: absolute;
				top: 50%;
				left: 0;
				margin-top: -6px;
				width: 10px;
				height: 12px;
				overflow: hidden;
				&:before {
					content: '';
					display: block;
					width: 0;
					height: 0;
					border: 6px solid transparent;
					border-left-color: #A7A7A7;
					border-left-width: 10px;
				}
			}
		}
		.article {
			font-size: 12px;
			line-height: 16px;
			cursor: pointer;
		}
		
		.list {
			display: none;
			.item {
				margin-top: 10px;
				.article.active {
					color: #005ADB;
					font-weight: bold;
				}
			}
		}
	}
}
</style>
